﻿@{
    Layout = "_LayoutPhone";
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<script src="~/echarts (1).js"></script>
<link href="~/GoTRI/css/bootstrap.min.css" rel="stylesheet" />
<!-- statistics CSS -->
<link href="~/GoTRI/css/statistics.css" rel="stylesheet" />
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="~/GoTRI/js/jquery-3.2.1.min.js"></script>
<script src="~/GoTRI/js/popper.min.js"></script>
<script src="~/GoTRI/js/bootstrap.min.js"></script>
<!-- 主体 -->
<header style="width: 100%; height: 4rem; background-color: rgb(255,135,0);">
    @*<a href="#" onclick="tiaoye()">
            <img src="~/GoTRI/img/left.png" alt="" style="float: left;
            width: 1rem;
            height: 2rem;
            margin-left: 1rem;
            margin-top: 1rem;">
        </a>*@
    <div style=" width: 100%; height: 4rem; line-height: 4rem; text-align: center; color: #fff; font-size: 1.3rem;">统计管理</div>
</header>

<div class="main" style="padding:0px;">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a href="#new_cust" onclick="" id="y" class="nav-link active" data-toggle="tab">
                <span>新增客户</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="#visit_cust" onclick="er()" id="e" class="nav-link" data-toggle="tab">
                <span>来访客户</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="#record" onclick="san()" id="s" class="nav-link" data-toggle="tab">
                <span>跟进记录</span>
            </a>
        </li>

    </ul>
    <div class="tab-content">
        <!--新增客户 -->
        <div id="new_cust" class="tab-pane active">
            <div class="pane-item">
                <div class="content-tit">
                    <div></div>
                    <span>
                        新增客户数
                    </span>
                </div>
                <div class="content-body">
                    <div id="xinzengkehushu" style="height:250%"></div>
                </div>
            </div>
            <div class="pane-item">
                <div class="content-tit">
                    <div></div>
                    <span>客户来源</span>
                </div>
                <div class="content-body">
                    <div id="kehulaiyuan" style="height:250%"></div>
                </div>
            </div>
        </div>
        <!-- 来访客户 -->
        <div id="visit_cust" class="tab-pane active">
            <div class="pane-item">
                <div class="content-tit">
                    <div></div>
                    <span>
                        来访客户数
                    </span>
                </div>
                <div class="content-body">
                    <div id="laifangkehushu" style="height:270%"></div>
                </div>
            </div>
            <div class="pane-item">
                <div class="content-tit">
                    <div></div>
                    <span>客户来访类型</span>
                </div>
                <div class="content-body">
                    <div id="laifangkehuleixing" style="height:250%"></div>
                </div>
            </div>
        </div>
        <!-- 跟进记录 -->
        <div id="record" class="tab-pane active">
            <div class="pane-item">
                <div class="content-tit">
                    <div></div>
                    <span>客户跟进次数分布</span>
                </div>
                <div class="content-body">
                    <div id="kehugenjincishufenbu" style="height:250%"></div>
                </div>
            </div>
            <div class="pane-item">
                <div class="content-tit">
                    <div></div>
                    <span>跟进客户数</span>
                </div>
                <div class="content-body">
                    <div id="genjinkehushu" style="height:250%"></div>
                </div>
            </div>
        </div>
        @*<div style="height:1px;padding-bottom:100px"></div>*@
    </div>
</div>
<div style="margin-bottom: 50px;padding-bottom:1px"></div>
<div style="display:none" id="divid">@ViewData["LoginId"]</div>
<script>
    $(".yi").attr("hidden", "");
    $(document).ready(function () {
        $("#tongji1").attr("hidden", "");
        $("#tongji2").removeAttr("hidden", "");
        $("#tongji3").attr("hidden", "");
        $("#tongji4").removeAttr("hidden", "");

        $(function () {
            var isPageHide = false;
            window.addEventListener('pageshow', function () {
                if (isPageHide) {
                    window.location.href = "../PhoneTongJi/TongJi";
                }
            });
            window.addEventListener('pagehide', function () {
                isPageHide = true;
            });
        })
    })
</script>

<script type="text/javascript">
    $(document).ready(function () {
        LaiFangKeHuShu();
        KeHuGenJinCiShuFenBu();
        GenJinKeHuShu();
        XinZengKeHuShu();
        KeHuLaiFangLeiXing();
        document.getElementById("y").click();
        document.getElementById("e").click();
        document.getElementById("s").click();
        document.getElementById("y").click();

    });
    function er() {
        $("#visit_cust").removeAttr("style", "");
    }
    function san() {
        $("#record").removeAttr("style", "");
    }
    function XinZengKeHuShu() {
        var dom = document.getElementById("xinzengkehushu");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            angleAxis: {
            },
            radiusAxis: {
                type: 'category',
                data: null,
                z: 10
            },
            polar: {
            },
            series: [{
                type: 'bar',
                data: null,
                coordinateSystem: 'polar',
                name: 'A',
                stack: 'a'
            }, {
                type: 'bar',
                data: null,
                coordinateSystem: 'polar',
                name: 'B',
                stack: 'a'
            }],
            legend: {
                show: true,
                data: ['A', 'B']
            }
        };
        $.ajax({
            url: "../PhoneTongJi/XinZengKeHuShu",
            type: "post",
            data: { "GetJsonBy": "日" },
            dataType: "json",
            success: function (response) {
                myChart.setOption({
                    xAxis: {
                        type: 'category',
                        data: response.All
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: response.Data,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(220, 220, 220, 0.8)'
                        }
                    }]
                }, true);
            }
        });

    }
    function KeHuLaiYuan() {
        $.ajax({
            url: "../PhoneTongJi/ReturnPaiMing",
            type: "post",
            dataType: "json",
            success: function (response) {
                // document.getElementById('divPaiMing').innerHTML = '团队人数：' + response.All + ",我的排名：" + response.My;
                $.ajax({
                    url: "../PhoneTongJi/ReturnDaoFang",
                    type: "post",
                    dataType: "json",
                    success: function (response0) {
                        if (response.All == "") {
                            $("#hide").hide();
                        }
                        document.getElementById('divPaiMing').innerHTML = '团队人数：' + response.All + ",我的排名：" + response.My + ",当月带看人数：" + response0.Mounth;
                    }
                });
            }
        });
    }
    function LaiFangKeHuShu() {
        var dom = document.getElementById("laifangkehushu");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            xAxis: {
                type: 'category',
                data: [1, 2, 3]
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [0, 0, 0],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        };
        $.ajax({
            url: "../PhoneTongJi/GetLaiFang",
            type: "post",
            data: { "GetJsonBy": "日" },
            dataType: "json",
            success: function (response) {
                console.log(response);
                myChart.setOption({
                    xAxis: {
                        type: 'category',
                        data: response.All
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: response.Data,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(220, 220, 220, 0.8)'
                        }
                    }]
                }, true);
                console.log("123");
            }
        });
    }
    function KeHuLaiFangLeiXing() {
        var dom = document.getElementById("laifangkehuleixing");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: ['直接访问', '邮件营销']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 335, name: '直接访问' },
                        { value: 310, name: '邮件营销' }
                    ]
                }
            ]
        };
        $.ajax({
            url: "../PhoneTongJi/KeHuLaiFangLeiXing",
            type: "post",
            dataType: "json",
            success: function (response) {
                console.log(response);
                myChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 10,
                        data: ['首次访问', '复访客户']
                    },
                    series: [
                        {
                            name: '访问类型',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: response.All
                        }
                    ]
                }, true);
            }
        });
    }
    function KeHuGenJinCiShuFenBu() {
        var dom = document.getElementById("kehugenjincishufenbu");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            xAxis: {},
            yAxis: {},
            series: [{
                symbolSize: 20,
                data: [[10.0, 8.04],
                [8.0, 6.95],
                [10.0, 7.58],
                [9.0, 8.81],
                [10.0, 8.33],
                [10.0, 9.96],
                [6.0, 7.24],
                [4.0, 4.26],
                [10.0, 10.84],
                [7.0, 4.82],
                [5.0, 5.68]],
                type: 'scatter'
            }]
        };
        $.ajax({
            url: "../PhoneTongJi/GenJinCiShu",
            type: "post",
            data: { "GetJsonBy": "日" },
            dataType: "json",
            success: function (response) {
                myChart.setOption({
                    xAxis: {},
                    yAxis: {},
                    series: [{
                        symbolSize: 20,
                        data: response.All,
                        type: 'scatter'
                    }]
                }, true);
            }
        });
    }
    function GenJinKeHuShu() {
        var dom = document.getElementById("genjinkehushu");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            xAxis: {
                type: 'category',
                data: [1, 2, 3]
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [0, 0, 0],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        };
        $.ajax({
            url: "../PhoneTongJi/GenJinKeHuShu",
            type: "post",
            data: { "GetJsonBy": "日" },
            dataType: "json",
            success: function (response) {
                myChart.setOption({
                    xAxis: {
                        type: 'category',
                        data: response.All
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: response.Data,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(220, 220, 220, 0.8)'
                        }
                    }]
                }, true);
            }
        });
    }

</script>
